<html>
  
  <head>
  
    <title>
      Google Visualization - Pie Chart
    </title>
    
    <!-- call the Google Java Script API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
    <!-- call the core chart packages from google -->
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    
     <!-- This is the section that contains the data and visualization calls -->  
     <script type="text/javascript">
      function drawVisualization() {
 
        // Create a Google data table to hold the data that will be visualized  
        var data = new google.visualization.DataTable();

        //define the Columns type and Name
        data.addColumn('string', 'Department');
        data.addColumn('number', 'Millions of Dollars');

        //define the number of rows in the table
        data.addRows(4);

        //data.setValue(row, column, value)
        //for each row there are two columns each column is set individually
        data.setValue(0, 0, 'Reseach and Development');
        data.setValue(0, 1, 4);

        data.setValue(1, 0, 'Manufacturing');
        data.setValue(1, 1, 3);

        data.setValue(2, 0, 'Marketing');
        data.setValue(2, 1, 2);

        data.setValue(3, 0, 'Distribution');
        data.setValue(3, 1, 1);

        // Create the visualization based on the data above
        new google.visualization.PieChart(document.getElementById('visCostsPieChart')).draw(data,{title:"Spending by Department"});
       }
       
       google.setOnLoadCallback(drawVisualization);

    </script>
  </head>
  
   <body>

     <!-- this div tag is what places the visualization on the web page -->
     <div id="visCostsPieChart" style="width: 600px; height: 400px;"></div>
     
  </body>
  
</html>